<template>
    <view>
        <view @click.stop="openModel" class="selectBox">
            <text v-if="!selVal.length" style="color: #999; margin-left: 18rpx;">请选择</text>
            <text v-for="(i, idx) in selVal" :key="idx" class="sel">
                {{ i.unitName +',' }}
            </text>
        </view>
        <view style="width 100%; height: 0; position: relative;">
            <view v-if="open" class="listBox">
                <input class="inputTop" type="text" @input="e=>this.getSelect(e.detail.value)" placeholder="关键字搜索" />
                <scroll-view scroll-y="true" style="height: 240rpx;">
					<view v-if="!list.length" style="padding: 20rpx; color: red">未搜索到,请换关键字</view>
                    <view v-for="(i, idx) in list" :key="idx" @click.stop="select(i, idx)"
                        :class="i.show && 'active' || ''">
                        {{ i.unitName }}
                    </view>
				</scroll-view>
            </view>
            <view v-if="open" class="foot">
                <text @click.stop="open = false">收起</text>
                <text style="font-size: 28rpx;">共{{ list.length }}条数据</text>
                <text style="color: #4468e9" @click="aa">确定</text>
            </view>
        </view>

    </view>
</template>

<script>

export default {
    props: ['selVal'],
    data() {
        return {
            list: [],
            open: false,
        }
    },
    computed: {

    },
    created(){
        this.getSelect('')
    },
    onLoad() {
    },
    onUnload() {
    },
    onShow() {
    },
    methods: {
        getSelect(v) {
            this.$apis.completionData({searchKey: v}).then(res => {
                res.data = res.data.length && res.data.map(i=>{
                    if(this.selVal.filter(ii=>ii.id==i.id).length) i.show=true;
                    return i;
                }) || []
                this.list = res.data;
            })
        },
        openModel() {
            this.open = !this.open;
        },
        aa() {
            this.open = false;
            this.$emit('changee', {a:this.selVal, b:this.list})
        },
        select(item, idx) {
            this.$forceUpdate();
            this.list[idx].show=!this.list[idx].show;
            let newSel = this.selVal;
            if(this.selVal.filter((i, index) => i.id==item.id).length) {//已选择的再次被点击,删除当前点击
                let is = this.selVal.findIndex((ii, index, arr) => {
                    return ii.id == item.id
                })
                newSel.splice(is, 1);
                console.log('del');
            } else {//
                item.show=true;
                newSel.push(item);
                console.log('add');
            }
            this.$emit('changee', {a:newSel, b:this.list})
        }
    }
}
</script>

<style lang="scss">
page {
    background: #fff;
}
.inputTop {
    width: 100% !important;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 9999;
    color: #333;
    border-bottom: 1px solid #999;
    height: 65rpx;
    padding: 0 30rpx;
    border-radius: 10rpx;
}
.active {
    color: #4468e9;
    font-weight: bold;
    // background: #9aceeb;
}

.selectBox {
    position: relative;
    // display: flex;
    width: 100%;
    height: 64rpx;
    border: 1px solid #999;
    border-radius: 10rpx;
    padding: 10rpx;
    white-space: nowrap;
    overflow-x: auto;
    z-index: 9999;
}

.listBox {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    background: #fff;
    border: 1px solid #999;
    border-radius: 10rpx 10rpx 0 0;
    border-bottom: 0;
    z-index: 9999;
    height: 300rpx;
    overflow: auto;
    view {
        padding: 16rpx;
        font-size: 34rpx;
        border-radius: 10rpx;
        z-index: 99999;
    }
}
.foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: 298rpx;
    border: 1px solid #999;
    border-top: 0;
    background:#fff;
    padding: 0 20rpx;
    font-size: 32rpx;
    border-radius:  0 0 10rpx 10rpx;
    z-index: 9999;
    text {
        padding: 20rpx 0;
    }
}

.sel {
    // border: 1px solid #888;
    // background: #f3f3f3;
    padding: 4rpx;
    // margin: 0 6rpx;
    font-size: 30rpx;
    border-radius: 5rpx;
    overflow: auto;
}</style>